﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            var ws = new WebSocket(`ws://${document.location.host}/chat`);

            ws.onopen = function () {
                console.log('Opened!');
            };

            ws.onmessage = function (event) {
                var child = document.createElement('li');
                child.innerText = event.data;
                document.getElementById('messages').appendChild(child);
            };

            ws.onclose = function (event) {
                console.log('Closed!');
            };

            document.getElementById('sendmessage').addEventListener('submit', event => {
                let data = document.getElementById('data').value;
                ws.send(data);
                event.preventDefault();
            });
        });
    </script>
</head>
<body>
    <h1>WebSockets</h1>

    <form id="sendmessage">
        <input type="text" id="data" />
        <input type="submit" value="Send" />
    </form>

    <ul id="messages">

    </ul>
</body>
</html>
